<template>
    <div class="box" v-if=store.isScale>
        <div class="function" @click="line">
            <img src="/src/assets/image/线段.png">
            <p>距离</p>
        </div>
        <div class="function" @click="polygon">
            <img src="/src/assets/image/画多边形.png">
            <p>面积</p>
        </div>
        <div class="function" @click="circle">
            <img src="/src/assets/image/画圆.png">
            <p>范围</p>
        </div>
        <div class="function" @click="clear">
            <img src="/src/assets/image/删除.png">
            <p>清除</p>
        </div>
    </div>
</template>

<script setup>
import { mapStore } from '@/stores/counter';
import { scale } from '@/Hooks/scaleHook';
const store = mapStore()
const { line, polygon, circle, clear } = scale()

</script>

<style scoped lang="scss">
.box {
    display: flex;
    justify-content: space-around;
    height: 50px;
    width: 200px;
    z-index: 1000;
    position: fixed;
    bottom: 60px;
    right: 475px;

    .function {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }

    img {
        width: 25px;
        height: 25px;
        border: solid 1px #0e76ae;
        border-radius: 10px;
        background: #0e76ae;
        padding: 3px;
    }

    p {
        color: #fff;
        font-size: 12px;
    }
}
</style>
